<template>
  <div class="leafer-page" id="leaferDom"></div>
</template>

<script setup>
import {Leafer, Path, Platform, Rect} from 'leafer-ui'
import '@leafer-in/state'

import {butterfly, snake, flower} from '@/utils/svgPath.js'

defineOptions({
  name: 'libView_leaferPage'
})

onMounted(() => {
  const leafer = new Leafer({
    view: 'leaferDom', // 支持 window 、div、canvas 标签对象， 可使用id字符串(不用加 # 号)
    fill: '#123'
    // type: 'draw'
  })
  const path = new Path({
    x: 10,
    y: 10,
    scale: 3,
    // draggable: true,
    path: 'M16.5,14.85h0V22H14V15.78L9.24,11.49h0V5.84H5.5l5-5.84,5,5.84H11.75v4.74l4.75,4.27Z',
    fill: 'rgb(50,205,121)',
    hoverStyle: {fill: 'rgba(50,200,0, 1)'},
    pressStyle: {fill: 'rgba(255,255,0, 1)'},
    cursor: 'pointer',
    data: {
      name: '箭头灯',
      id: 12
    }
  })
  leafer.add(path)
  console.log(path)
  const rectSnake = new Rect({
    width: 200,
    height: 200,
    fill: {
      type: 'image',
      url: Platform.toURL(snake, 'svg'),
      mode: 'stretch'
    },
    draggable: true
  })
  leafer.add(rectSnake)

  const rectButterfly = new Rect({
    x: 180,
    width: 200,
    height: 200,
    fill: {
      type: 'image',
      url: Platform.toURL(butterfly, 'svg'),
      mode: 'stretch'
    },
    draggable: true
  })
  leafer.add(rectButterfly)

  const rectFlower = new Rect({
    x: 380,
    width: 200,
    height: 200,
    fill: {
      type: 'image',
      url: Platform.toURL(flower, 'svg'),
      mode: 'stretch'
    },
    draggable: true
  })
  leafer.add(rectFlower)

  const pathTumbler = new Path({
    scale: 0.2,
    y: 300,
    path: 'M945.344 586.304c-13.056-93.44-132.48-98.048-132.48-98.048 0-29.888-39.808-47.424-39.808-47.424L201.664 440.832c-36.736 0-42.112 51.264-42.112 51.264 7.68 288 181.44 382.976 181.44 382.976l299.456 0c42.88-31.36 101.888-122.56 101.888-122.56 9.216 3.072 72.768-0.832 97.984-6.144C865.6 740.992 958.336 679.68 945.344 586.304zM365.568 825.28c-145.472-105.664-130.944-328.576-130.944-328.576l80.448 0c-44.416 126.4 43.648 285.696 55.872 307.904C383.232 826.816 365.568 825.28 365.568 825.28zM833.472 694.272c-37.568 22.272-65.152 7.68-65.152 7.68 39.04-54.4 42.112-159.296 42.112-159.296 6.848 2.304 12.288-26.048 61.312 23.744C920.768 616.128 871.04 672.064 833.472 694.272z M351.68 129.856c0 0-119.424 72.832-44.416 140.928 75.008 68.16 68.16 93.44 24.512 153.216 0 0 81.92-41.344 71.168-104.192s-89.6-94.208-72.768-137.792C347.136 138.304 351.68 129.856 351.68 129.856z M615.232 91.648c0 0-119.488 72.832-44.352 140.928 74.944 68.16 68.032 93.44 24.448 153.216 0 0 81.984-41.344 71.232-104.192-10.688-62.784-89.6-94.208-72.832-137.792C610.624 100.032 615.232 91.648 615.232 91.648z M491.136 64c0 0-74.304 6.144-88.128 78.144C389.248 214.144 435.968 240.96 471.936 276.992 507.904 312.96 492.608 380.352 452.032 427.904c0 0 72.768-25.344 89.6-94.976 16.832-69.76-17.344-94.272-52.8-134.784C453.312 157.504 456.64 83.968 491.136 64z',
    fill: 'rgb(50,205,121)',
    draggable: true
  })

  leafer.add(pathTumbler)

})
</script>

<style lang="scss" scoped>
.leafer-page {
  width: 100%;
  height: 100%;
}
</style>
